<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>项目管理 - 项目表单</title>

    <link href="/assets/images/favicon.ico" rel="icon">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css" />
    <link rel="stylesheet" href="/assets/module/admin.css?v=318" />

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
    <script type="text/javascript" src="/assets/js/common.js?v=318"></script>

    <style>
        .model-form-footer {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">

            <form class="layui-form model-form" id="projectForm" th:object="${model}">
                <input type="hidden" th:field="*{id}" />

                <!-- 项目名称 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">项目名称</label>
                    <div class="layui-input-block">
                        <input type="text" th:field="*{projectName}" required lay-verify="required" placeholder="请输入项目名称" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <!-- 开始时间 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-block">
                        <input type="text" th:field="*{beginDate}"
                               th:value="${#dates.format(model.beginDate, 'yyyy-MM-dd')}"
                               id="startTime" required lay-verify="required" placeholder="选择开始时间" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <!-- 结束时间 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-block">
                        <input type="text" th:field="*{endDate}"
                               th:value="${#dates.format(model.endDate, 'yyyy-MM-dd')}"
                               id="endTime" required lay-verify="required" placeholder="选择结束时间" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <!-- 总学员人数 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">总学员人数</label>
                    <div class="layui-input-block">
                        <input type="number" th:field="*{num}" required lay-verify="required|number" placeholder="请输入总学员人数" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <!-- 培训内容 -->
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">培训内容</label>
                    <div class="layui-input-block">
                        <textarea th:field="*{subject}" placeholder="请输入培训内容" class="layui-textarea" required lay-verify="required"></textarea>
                    </div>
                </div>

                <!-- 状态 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <select th:field="*{state}" lay-verify="required">
                            <option value="">请选择状态</option>
                            <option th:value="0">未启动</option>
                            <option th:value="1">培训中</option>
                            <option th:value="2">培训结束</option>
                        </select>
                    </div>
                </div>

                <!-- 提交按钮 -->
                <div class="layui-form-item text-center model-form-footer">
                    <button class="layui-btn" lay-filter="save" lay-submit>保存</button>
                    <button type="button" class="layui-btn layui-btn-primary" lay-event="closeDialog">关闭</button>
                </div>
            </form>

            <script src="/assets/libs/jquery/jquery-3.2.1.min.js"></script>
            <script>
                $(function () {
                    layui.use(['form', 'layer', 'laydate'], function () {
                        var form = layui.form;
                        var layer = layui.layer;
                        var laydate = layui.laydate;
                        var $ = layui.jquery;

                        // 格式化日期函数
                        function formatDate(dateStr) {
                            if (!dateStr) return ''; // 防止空日期导致错误
                            var date = new Date(dateStr);
                            var year = date.getFullYear();
                            var month = (date.getMonth() + 1).toString().padStart(2, '0');
                            var day = date.getDate().toString().padStart(2, '0');
                            return `${year}-${month}-${day}`;
                        }

                        // 初始化日期输入框
                        $('#startTime').val(formatDate($('#startTime').val()));
                        $('#endTime').val(formatDate($('#endTime').val()));

                        // 初始化日期选择器
                        laydate.render({
                            elem: '#startTime',
                            type: 'date',
                            format: 'yyyy-MM-dd',
                            trigger: 'click', // 确保点击后能正常弹出日期框
                            done: function (value, date, endDate) {
                                // 更新结束时间选择器的最小值
                                laydate.render({
                                    elem: '#endTime',
                                    type: 'date',
                                    format: 'yyyy-MM-dd',
                                    min: value, // 动态设置结束时间的最小值
                                    trigger: 'click'
                                });
                            }
                        });

                        laydate.render({
                            elem: '#endTime',
                            type: 'date',
                            format: 'yyyy-MM-dd',
                            trigger: 'click' // 确保点击后能正常弹出日期框
                        });

                        // 监听提交
                        form.on('submit(save)', function (data) {
                            var startTime = $('#startTime').val();
                            var endTime = $('#endTime').val();

                            // 判断结束时间是否大于等于开始时间
                            if (new Date(endTime) < new Date(startTime)) {
                                layer.msg('结束时间不能小于开始时间', {icon: 2});
                                return false; // 阻止表单提交
                            }

                            // 显示加载层
                            var loadIndex = layer.load(2);

                            // 发送AJAX请求
                            $.ajax({
                                type: 'POST',
                                url: "/project/save",
                                contentType: 'application/json', // 设置为JSON格式
                                data: JSON.stringify(data.field), // 转换表单数据为JSON
                                dataType: 'json',
                                success: function (res) {
                                    layer.close(loadIndex);
                                    if (res.code === 0) {
                                        // 访问加载列表
                                        parent.layui.table.reload('tableList');
                                        // 关闭当前窗口
                                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                                        // 显示成功信息
                                        parent.layer.msg('保存成功', {icon: 1});
                                    } else {
                                        layer.msg('保存失败: ' + res.msg, {icon: 2});
                                    }
                                },
                                error: function () {
                                    layer.close(loadIndex);
                                    layer.msg('网络错误，请稍后再试', {icon: 2});
                                }
                            });

                            return false; // 阻止表单默认提交行为
                        });

                        // 监听关闭按钮点击事件
                        $('.layui-btn-primary').on('click', function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });
                    });
                });
            </script>

        </div>
    </div>
</div>

<footer>
    <!-- JS部分 -->
    <script type="text/javascript">
        var url = window.location.pathname.substring(1);
        var item = url.split("/");
        var jsUrl = "/static/module/javaweb_" + item[0] + ".js";
        document.write("<script src='" + jsUrl + "'><\/script>");
    </script>
</footer>
</body>
</html>
